<template>
  <view class="product-inbound-container">
    <!-- 查询区域 -->
    <view class="query-section">
      <view class="query-header">
        <text class="query-title">查询入库单</text>
        <view class="pending-btn" @click="goToHistory">
          <uni-icons type="list" size="16" color="#007AFF"></uni-icons>
          <text class="btn-text">历史记录</text>
        </view>
      </view>

      <!-- 查询类型选择标签 -->
      <view class="query-tabs">
        <view 
          class="tab-item" 
          :class="{ active: queryType === 'sn' }"
          @click="switchQueryType('sn')"
        >
          <text class="tab-text">SN码查询</text>
        </view>
        <view 
          class="tab-item" 
          :class="{ active: queryType === 'recptCode' }"
          @click="switchQueryType('recptCode')"
        >
          <text class="tab-text">入库单号查询</text>
        </view>
      </view>

      <!-- 查询输入区域 -->
      <view class="query-input-area">
        <view class="input-group" v-if="queryType === 'sn'">
          <view class="input-wrapper">
            <input 
              class="query-input" 
              v-model="queryData.snCode" 
              placeholder="请扫描或输入产品SN码"
              @confirm="handleSnConfirm"
            />
            <view class="input-icon scan-icon" @click="startScan">
              <uni-icons type="scan" size="16" color="#28a745"></uni-icons>
            </view>
            <view class="input-icon clear-icon" @click="clearSnCode">
              <uni-icons type="clear" size="16" color="#999"></uni-icons>
            </view>
          </view>
        </view>

        <view class="input-group" v-if="queryType === 'recptCode'">
          <view class="input-wrapper">
            <input 
              class="query-input" 
              v-model="queryData.recptCode" 
              placeholder="请扫描或输入入库单编号"
              @confirm="handleRecptCodeConfirm"
            />
            <view class="input-icon scan-icon" @click="startScan">
              <uni-icons type="scan" size="16" color="#28a745"></uni-icons>
            </view>
            <view class="input-icon clear-icon" @click="clearRecptCode">
              <uni-icons type="clear" size="16" color="#999"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 历史记录页面（使用uni-popup或其他方式展示） -->
    <uni-popup ref="historyPopup" type="bottom" :safe-area="false">
      <view class="history-popup">
        <view class="history-header">
          <text class="history-title">入库记录</text>
          <view class="history-close" @click="closeHistory">
            <uni-icons type="close" size="20" color="#666"></uni-icons>
          </view>
        </view>
        <view class="history-content">
          <!-- 加载状态 -->
          <view v-if="recordLoading" class="loading-state">
            <view class="loading-spinner"></view>
            <text class="loading-text">加载中...</text>
          </view>
          
          <!-- 记录列表 -->
          <view v-else-if="inboundRecords.length > 0" class="records-list">
            <view 
              class="record-item" 
              v-for="record in inboundRecords" 
              :key="record.detailId"
              @click="showRecordDetail(record)"
            >
              <view class="item-header">
                <text class="item-title">{{ record.sn }}</text>
                <view class="item-status status-confirmed">
                  <text class="status-text">已确认</text>
                </view>
              </view>
              
              <view class="item-content">
                <view class="content-row">
                  <text class="row-label">产品编码</text>
                  <text class="row-value">{{ record.itemCode }}</text>
                </view>
                <view class="content-row">
                  <text class="row-label">产品名称</text>
                  <text class="row-value">{{ record.itemName }}</text>
                </view>
                <view class="content-row">
                  <text class="row-label">确认时间</text>
                  <text class="row-value">{{ formatConfirmTime(record.confirmTime) }}</text>
                </view>
              </view>
              
              <view class="item-action">
                <uni-icons type="right" size="16" color="#999"></uni-icons>
              </view>
            </view>
          </view>
          
          <!-- 空状态 -->
          <view v-else class="empty-state">
            <uni-icons type="info-filled" size="60" color="#ccc"></uni-icons>
            <text class="empty-text">暂无入库记录</text>
          </view>

          <!-- 分页控件 -->
          <view class="pagination-section" v-if="inboundRecords.length > 0">
            <view class="pagination-controls">
              <button class="pagination-btn" @click="goToPage(recordPageNum - 1)" 
                :disabled="recordPageNum <= 1 || recordLoading">
                <text>上一页</text>
              </button>
              <view class="page-info">
                <text>{{ recordPageNum }} / {{ Math.ceil(recordTotal / recordPageSize) }}</text>
              </view>
              <button class="pagination-btn" @click="goToPage(recordPageNum + 1)" 
                :disabled="recordPageNum >= Math.ceil(recordTotal / recordPageSize) || recordLoading">
                <text>下一页</text>
              </button>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { 
  getInboundBySnCode,
  getInboundByRecptCode,
  executeInbound,
  confirmSnDetail,
  getConfirmDetail
} from '@/api/wm/productrecpt.js'
import warehouse from './common/warehouse/warehouse.vue'
import { initScan, startScan as startPdaScan, stopScan, isPdaScanAvailable } from '@/utils/pdaScan'

export default {
  name: 'ProductInboundNew',
  components: {
    warehouse
  },
  data() {
    return {
      // 查询类型：sn(SN码查询) | recptCode(入库单号查询)
      queryType: 'sn',
      
      // 查询相关
      queryData: {
        snCode: '', // SN码输入
        recptCode: '' // 入库单号输入
      },
      
      // 入库单信息
      inboundInfo: null,
      recptLines: [], // 保留行数据用于获取产品信息
      allDetails: [], // 所有明细平铺列表
      totalDetails: 0,
      
      // SN详情弹窗
      showSnModal: false,
      currentSnDetail: {},
      selectedWarehouseData: null,
      locationRemark: '',
      scannedAreaCode: '',
      
      // 仓库选择器
      warehouseDisplayMode: 'name',
      locationDisplayMode: 'name',
      areaDisplayMode: 'code',
      
      // 历史记录
      inboundRecords: [],
      recordPageNum: 1,
      recordPageSize: 10,
      recordTotal: 0,
      recordLoading: false,
      
      // 提交状态
      executing: false
    }
  },
  
  computed: {
    canExecute() {
      // 可以根据状态判断是否可以提交
      return this.inboundInfo && this.allDetails.length > 0
    }
  },
  
  mounted() {
    if (isPdaScanAvailable()) {
      initScan(this.handlePdaScanResult, 'ProductInboundNew')
    }
  },
  
  onShow() {
    if (isPdaScanAvailable()) {
      initScan(this.handlePdaScanResult, 'ProductInboundNew')
      startPdaScan('ProductInboundNew')
    }
  },
  
  onHide() {
    if (isPdaScanAvailable()) {
      stopScan('ProductInboundNew')
    }
  },
  
  onUnload() {
    if (isPdaScanAvailable()) {
      stopScan('ProductInboundNew')
    }
  },
  
  methods: {
    // 切换查询类型
    switchQueryType(type) {
      this.queryType = type
      // 切换类型时清空输入
      this.queryData.snCode = ''
      this.queryData.recptCode = ''
    },
    
    // PDA扫描处理
    handlePdaScanResult(code) {
      console.log('PDA扫描结果:', code)
      if (!code || !code.trim()) return
      
      const scanData = code.trim()
      
      // 根据当前查询类型设置对应的输入框
      if (this.queryType === 'sn') {
        this.queryData.snCode = this.parseSn(scanData)
        this.handleSnConfirm()
      } else if (this.queryType === 'recptCode') {
        this.queryData.recptCode = scanData
        this.handleRecptCodeConfirm()
      }
    },
    
    // 解析SN（支持 itemCode*sn 或直接sn）
    parseSn(raw) {
      if (!raw) return ''
      const s = String(raw).trim()
      if (!s) return ''
      const parts = s.split('*')
      // 取最后一段作为SN，避免多段星号的情况
      return parts[parts.length - 1].trim()
    },
    
    // 开始扫码
    startScan() {
      uni.scanCode({
        onlyFromCamera: true,
        success: (res) => {
          const scanData = res.result
          // 根据当前查询类型设置对应的输入框
          if (this.queryType === 'sn') {
            this.queryData.snCode = this.parseSn(scanData)
            this.handleSnConfirm()
          } else if (this.queryType === 'recptCode') {
            this.queryData.recptCode = scanData
            this.handleRecptCodeConfirm()
          }
        },
        fail: () => {
          uni.showToast({ title: '扫码失败', icon: 'none' })
        }
      })
    },
    
    // 清空SN码输入
    clearSnCode() {
      this.queryData.snCode = ''
    },
    
    // 清空入库单号输入
    clearRecptCode() {
      this.queryData.recptCode = ''
    },
    
    // SN码查询确认
    handleSnConfirm() {
      if (!this.queryData.snCode.trim()) {
        uni.showToast({ title: '请输入SN码', icon: 'none' })
        return
      }
      
      uni.showLoading({ title: '查询中...' })
      
      getInboundBySnCode(this.queryData.snCode).then(response => {
        if (response.code === 200 && response.data) {
          this.processInboundData(response.data)
        } else {
          uni.showToast({ title: response.msg || '未找到相关入库单', icon: 'none' })
          this.inboundInfo = null
          this.allDetails = []
        }
      }).catch(error => {
        console.error('查询失败:', error)
        if (error !== '500') {
          uni.showToast({ title: '查询失败', icon: 'none' })
        }
        this.inboundInfo = null
        this.allDetails = []
      }).finally(() => {
        this.clearSnCode()
        uni.hideLoading()
      })
    },
    
    // 入库单号查询确认
    handleRecptCodeConfirm() {
      if (!this.queryData.recptCode.trim()) {
        uni.showToast({ title: '请输入入库单号', icon: 'none' })
        return
      }
      
      uni.showLoading({ title: '查询中...' })
      
      getInboundByRecptCode(this.queryData.recptCode).then(response => {
        if (response.code === 200 && response.data) {
          this.processInboundData(response.data)
        } else {
          uni.showToast({ title: response.msg || '未找到相关入库单', icon: 'none' })
          this.inboundInfo = null
          this.allDetails = []
        }
      }).catch(error => {
        console.error('查询失败:', error)
        if (error !== '500') {
          uni.showToast({ title: '查询失败', icon: 'none' })
        }
        this.inboundInfo = null
        this.allDetails = []
      }).finally(() => {
        this.clearRecptCode()
        uni.hideLoading()
      })
    },
    
    // 处理入库单数据
    processInboundData(data) {
      this.inboundInfo = data.recptHeader
      this.recptLines = data.recptLines || []
      this.totalDetails = data.totalDetails || 0
      
      // 将所有行的details平铺到一个数组中
      this.allDetails = []
      this.recptLines.forEach(line => {
        if (line.details && Array.isArray(line.details)) {
          line.details.forEach(detail => {
            // 为每个detail添加行信息（用于显示产品信息）
            this.allDetails.push({
              ...detail,
              _lineItemCode: line.itemCode,
              _lineItemName: line.itemName,
              _lineSpecification: line.specification
            })
          })
        }
      })
    },
    
    // 获取行的产品编码
    getLineItemCode(detail) {
      return detail._lineItemCode || ''
    },
    
    // 获取行的产品名称
    getLineItemName(detail) {
      return detail._lineItemName || ''
    },
    
    // 获取行的规格型号
    getLineSpecification(detail) {
      return detail._lineSpecification || ''
    },
    
    // 显示SN详情
    showSnDetail(detail) {
      this.currentSnDetail = { ...detail }
      this.selectedWarehouseData = null
      this.locationRemark = detail.remark || ''
      this.scannedAreaCode = detail.areaCode || ''
      this.showSnModal = true
    },
    
    // 关闭SN详情
    closeSnModal() {
      this.showSnModal = false
      this.currentSnDetail = {}
      this.selectedWarehouseData = null
      this.locationRemark = ''
      this.scannedAreaCode = ''
    },
    
    // 仓库选择回调
    onWarehouseSelected(data) {
      this.selectedWarehouseData = data
    },
    
    // 确认当前SN
    confirmCurrentSn() {
      if (!this.selectedWarehouseData || !this.selectedWarehouseData.warehouse) {
        uni.showToast({ title: '请选择仓库', icon: 'none' })
        return
      }
      if (!this.selectedWarehouseData.location) {
        uni.showToast({ title: '请选择库区', icon: 'none' })
        return
      }
      if (!this.selectedWarehouseData.area) {
        uni.showToast({ title: '请选择库位', icon: 'none' })
        return
      }
      
      uni.showLoading({ title: '确认SN中...' })
      
      const updateData = {
        detailId: this.currentSnDetail.detailId,
        warehouseId: this.selectedWarehouseData.warehouseId,
        warehouseName: this.selectedWarehouseData.warehouseName,
        locationId: this.selectedWarehouseData.locationId,
        locationName: this.selectedWarehouseData.locationName,
        areaId: this.selectedWarehouseData.areaId,
        areaName: this.selectedWarehouseData.areaName,
        areaCode: this.selectedWarehouseData.areaCode,
        remark: this.locationRemark.trim() || ''
      }
      
      confirmSnDetail(updateData).then(response => {
        const resData = response && response.data ? response.data : {}
        
        // 更新当前SN信息
        this.currentSnDetail.warehouseName = resData.warehouseName || this.selectedWarehouseData.warehouseName
        this.currentSnDetail.locationName = resData.locationName || this.selectedWarehouseData.locationName
        this.currentSnDetail.areaName = resData.areaName || this.selectedWarehouseData.areaName
        this.currentSnDetail.areaCode = resData.areaCode || this.selectedWarehouseData.areaCode
        this.currentSnDetail.remark = resData.remark || this.locationRemark.trim()
        this.currentSnDetail.confirmStatus = resData.confirmStatus || 'Y'
        
        // 同步更新列表中的SN信息
        const index = this.allDetails.findIndex(d => d.detailId === this.currentSnDetail.detailId)
        if (index !== -1) {
          this.allDetails[index] = { ...this.currentSnDetail }
        }
        
        uni.showToast({ title: 'SN确认成功', icon: 'success' })
        setTimeout(() => {
          this.closeSnModal()
        }, 1500)
      }).catch(error => {
        console.error('确认SN失败:', error)
        uni.showToast({ title: '确认失败', icon: 'none' })
      }).finally(() => {
        uni.hideLoading()
      })
    },
    
    // 提交入库单
    handleSubmit() {
      if (!this.inboundInfo) {
        uni.showToast({ title: '请先查询入库单', icon: 'none' })
        return
      }
      
      // 检查是否所有SN都已确认
      const allConfirmed = this.allDetails.every(detail => detail.confirmStatus === 'Y')
      
      if (!allConfirmed) {
        const unconfirmedCount = this.allDetails.filter(d => d.confirmStatus !== 'Y').length
        uni.showToast({ 
          title: `还有${unconfirmedCount}个SN未确认`, 
          icon: 'none',
          duration: 3000
        })
        return
      }
      
      uni.showModal({
        title: '确认提交',
        content: '确定要提交该入库单吗？提交后将完成入库操作。',
        success: (res) => {
          if (res.confirm) {
            this.performSubmit()
          }
        }
      })
    },
    
    // 执行提交
    performSubmit() {
      this.executing = true
      uni.showLoading({ title: '提交中...' })
      
      executeInbound(this.inboundInfo.recptId).then(response => {
        uni.showToast({ title: '提交成功', icon: 'success' })
        
        // 刷新数据
        setTimeout(() => {
          this.handleQueryConfirm()
        }, 1500)
      }).catch(error => {
        console.error('提交失败:', error)
        if (error !== '500') {
          uni.showToast({ title: '网络异常，请检查网络连接后重试', icon: 'none', duration: 3000 })
        }
      }).finally(() => {
        uni.hideLoading()
        this.executing = false
      })
    },
    
    // 打开历史记录
    goToHistory() {
      this.$refs.historyPopup.open()
      this.loadInboundRecords()
    },
    
    // 关闭历史记录
    closeHistory() {
      this.$refs.historyPopup.close()
    },
    
    // 加载入库记录
    async loadInboundRecords() {
      if (this.recordLoading) return
      
      this.recordLoading = true
      
      try {
        const params = {
          pageNum: this.recordPageNum,
          pageSize: this.recordPageSize
        }
        
        const response = await getConfirmDetail(params)
        
        if (response.code === 200) {
          this.recordTotal = response.total || 0
          this.inboundRecords = response.rows || []
        } else {
          uni.showToast({ title: response.msg || '查询失败', icon: 'none' })
        }
      } catch (error) {
        console.error('查询入库记录失败:', error)
        uni.showToast({ title: '查询失败', icon: 'none' })
      } finally {
        this.recordLoading = false
      }
    },
    
    // 跳转页面
    goToPage(pageNum) {
      const totalPages = Math.ceil(this.recordTotal / this.recordPageSize)
      if (pageNum < 1 || pageNum > totalPages) return
      
      this.recordPageNum = pageNum
      this.loadInboundRecords()
    },
    
    // 显示记录详情
    showRecordDetail(record) {
      // 可以打开详情弹窗或跳转
      uni.showToast({ title: `SN: ${record.sn}`, icon: 'none' })
    },
    
    // 格式化确认时间
    formatConfirmTime(confirmTime) {
      if (!confirmTime) return ''
      try {
        const date = new Date(confirmTime)
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        return `${year}-${month}-${day} ${hours}:${minutes}`
      } catch (error) {
        return confirmTime
      }
    },
    
    // 获取状态文本
    getStatusText(status) {
      const map = {
        'PREPARE': '草稿',
        'CONFIRMED': '已确认',
        'APPROVING': '审批中',
        'APPROVED': '已审批',
        'FINISHED': '已完成',
        'CANCELED': '已取消'
      }
      return map[status] || status
    },
    
    // 获取状态样式
    getStatusClass(status) {
      const map = {
        'PREPARE': 'status-draft',
        'CONFIRMED': 'status-confirmed',
        'APPROVING': 'status-pending',
        'APPROVED': 'status-confirmed',
        'FINISHED': 'status-completed',
        'CANCELED': 'status-cancelled'
      }
      return map[status] || 'status-default'
    },
    
    // 获取明细状态文本
    getDetailStatusText(detail) {
      return detail.confirmStatus === 'Y' ? '已确认' : '未确认'
    },
    
    // 获取明细状态样式
    getDetailStatusClass(detail) {
      return detail.confirmStatus === 'Y' ? 'line-status-completed' : 'line-status-pending'
    },
    
    // 获取确认状态文本
    getConfirmStatusText(status) {
      return status === 'Y' ? '已确认' : '未确认'
    },
    
    // 获取确认状态样式
    getConfirmStatusClass(status) {
      return status === 'Y' ? 'confirm-status-confirmed' : 'confirm-status-pending'
    }
  }
}
</script>

<style lang="scss" scoped>
.product-inbound-container {
  padding: 16rpx;
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 80rpx;
}

// 查询区域样式（参考采购入库）
.query-section {
  background: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
}

.query-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
  
  .query-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
  }
  
  .pending-btn {
    display: flex;
    align-items: center;
    gap: 6rpx;
    padding: 8rpx 14rpx;
    background: rgba(0, 122, 255, 0.1);
    border-radius: 16rpx;
    border: 1rpx solid rgba(0, 122, 255, 0.2);
    
    .btn-text {
      font-size: 22rpx;
      color: #007AFF;
      font-weight: 500;
    }
    
    &:active {
      background: rgba(0, 122, 255, 0.2);
      transform: scale(0.98);
    }
  }
}

// 查询类型标签页样式（紧凑分段控件风格）
.query-tabs {
  display: flex;
  gap: 24rpx;
  padding: 0 4rpx;
  margin-bottom: 10rpx;
  background: transparent;

  .tab-item {
    padding: 10rpx 6rpx;
    position: relative;
    cursor: pointer;

    .tab-text {
      font-size: 26rpx;
      color: #666;
      transition: color 0.2s ease;
    }

    &.active .tab-text {
      color: #28a745;
      font-weight: 600;
    }

    &.active::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 4rpx;
      background: #28a745;
      border-radius: 2rpx;
    }
  }
}

.query-input-area {
  .input-group {
    .input-label {
      display: block;
      font-size: 24rpx;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      
      .query-input {
        flex: 1;
        height: 64rpx;
        padding: 0 90rpx 0 16rpx;
        border: 1rpx solid #e6e6e6;
        border-radius: 8rpx;
        font-size: 26rpx;
        background: #fff;
        
        &:focus {
          border-color: #28a745;
        }
      }
      
      .input-icon {
        position: absolute;
        padding: 8rpx;
        border-radius: 50%;
        
        &.scan-icon {
          right: 44rpx;
          background: rgba(40, 167, 69, 0.06);
        }
        
        &.clear-icon {
          right: 12rpx;
        }
      }
    }
  }
}

// 入库单信息区域（参考采购入库）
.purchase-info-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.info-header, .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .info-title, .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .info-status {
    padding: 6rpx 12rpx;
    border-radius: 16rpx;
    font-size: 20rpx;
    
    &.status-draft { background: #f8f9fa; color: #6c757d; }
    &.status-pending { background: #fff3cd; color: #856404; }
    &.status-confirmed { background: #d1ecf1; color: #0c5460; }
    &.status-completed { background: #d4edda; color: #155724; }
    &.status-cancelled { background: #f8d7da; color: #721c24; }
  }
  
  .section-count {
    font-size: 24rpx;
    color: #666;
  }
}

.info-content {
  .info-row {
    display: flex;
    justify-content: space-between;
    padding: 12rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .info-label {
      font-size: 26rpx;
      color: #666;
      min-width: 140rpx;
    }
    
    .info-value {
      font-size: 26rpx;
      color: #333;
      flex: 1;
      text-align: right;
    }
  }
}

.action-section {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  
  .action-btn {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rpx;
    font-size: 28rpx;
    color: #fff;
    border: none;
    
    &.disabled {
      background: #ccc;
      color: #999;
    }
    
    .btn-text {
      font-size: 28rpx;
      font-weight: 600;
    }
    
    &.execute-btn {
      background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
      box-shadow: 0 4rpx 16rpx rgba(40, 167, 69, 0.3);
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-top: 20rpx;
  }
}

// 明细列表样式（参考采购入库的行列表）
.purchase-lines-section {
  .lines-list {
    margin-top: 20rpx;
    
    .line-item {
      background: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      padding: 24rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      position: relative;
      
      &:active {
        transform: scale(0.98);
        box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.15);
      }
      
      .line-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        
        .line-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        
        .line-status {
          padding: 6rpx 12rpx;
          border-radius: 16rpx;
          font-size: 20rpx;
          
          &.line-status-pending {
            background: #fff3cd;
            color: #856404;
          }
          
          &.line-status-completed {
            background: #d4edda;
            color: #155724;
          }
        }
      }
      
      .line-content {
        padding-right: 60rpx;
        
        .content-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16rpx 20rpx;
          
          .grid-item {
            display: flex;
            flex-direction: column;
            
            .item-label {
              font-size: 22rpx;
              color: #666;
              margin-bottom: 6rpx;
            }
            
            .item-value {
              font-size: 24rpx;
              color: #333;
              font-weight: 500;
              word-break: break-all;
              line-height: 1.4;
            }
            
            &.full-width {
              grid-column: 1 / -1;
            }
          }
        }
      }
      
      .line-action {
        position: absolute;
        right: 24rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}

// SN详情弹窗样式
.sn-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .modal-content {
    background: #fff;
    border-radius: 20rpx;
    width: 90%;
    max-width: 700rpx;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    
    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx;
      background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
      border-radius: 20rpx 20rpx 0 0;
      
      .modal-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
      }
      
      .modal-close {
        padding: 12rpx;
        border-radius: 50%;
        
        &:active {
          background: rgba(255, 255, 255, 0.2);
        }
      }
    }
    
    .modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 30rpx;
      
      .sn-info-section {
        margin-bottom: 30rpx;
        
        .info-row {
          display: flex;
          justify-content: space-between;
          padding: 12rpx 0;
          border-bottom: 1rpx solid #f0f0f0;
          
          &:last-child {
            border-bottom: none;
          }
          
          .info-label {
            font-size: 26rpx;
            color: #666;
            min-width: 140rpx;
          }
          
          .info-value {
            font-size: 26rpx;
            color: #333;
            flex: 1;
            text-align: right;
            
            &.confirm-status-confirmed {
              color: #28a745;
              font-weight: bold;
            }
            
            &.confirm-status-pending {
              color: #856404;
              font-weight: bold;
            }
          }
        }
      }
      
      .location-edit-section {
        margin-top: 30rpx;
        padding: 20rpx;
        background: #f8f9fa;
        border-radius: 12rpx;
        
        .location-edit-header {
          margin-bottom: 20rpx;
          
          .location-edit-title {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
          }
        }
        
        .location-edit-content {
          .location-input-group {
            margin-bottom: 20rpx;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            .location-input-label {
              display: block;
              font-size: 26rpx;
              color: #666;
              margin-bottom: 10rpx;
            }
            
            .remark-input-wrapper {
              position: relative;
              
              .remark-textarea {
                width: 100%;
                min-height: 120rpx;
                padding: 20rpx;
                border: 1rpx solid #ddd;
                border-radius: 8rpx;
                font-size: 28rpx;
                background: #fff;
                box-sizing: border-box;
              }
              
              .remark-counter {
                position: absolute;
                bottom: 10rpx;
                right: 15rpx;
                font-size: 22rpx;
                color: #999;
              }
            }
          }
        }
      }
      
      .modal-actions {
        display: flex;
        gap: 20rpx;
        margin-top: 30rpx;
        
        .action-btn {
          flex: 1;
          height: 80rpx;
          border-radius: 8rpx;
          font-size: 28rpx;
          font-weight: bold;
          
          &.cancel {
            background: #f8f9fa;
            color: #666;
            border: 1rpx solid #ddd;
          }
          
          &.confirm {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: #fff;
            border: none;
          }
        }
      }
    }
  }
}

// 历史记录弹窗样式（参考待处理列表）
.history-popup {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  
  .history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
    border-radius: 24rpx 24rpx 0 0;
    
    .history-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #fff;
    }
    
    .history-close {
      padding: 12rpx;
      border-radius: 50%;
      
      &:active {
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }
  
  .history-content {
    flex: 1;
    overflow-y: auto;
    padding: 20rpx;
    
    .loading-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80rpx 40rpx;
      
      .loading-spinner {
        width: 60rpx;
        height: 60rpx;
        border: 4rpx solid #f3f3f3;
        border-top: 4rpx solid #007AFF;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 20rpx;
      }
      
      .loading-text {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .records-list {
      .record-item {
        background: #fff;
        border-radius: 12rpx;
        margin-bottom: 20rpx;
        padding: 24rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
        position: relative;
        
        &:active {
          transform: scale(0.98);
        }
        
        .item-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20rpx;
          
          .item-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }
          
          .item-status {
            padding: 6rpx 12rpx;
            border-radius: 16rpx;
            font-size: 20rpx;
            
            &.status-confirmed {
              background: #d4edda;
              color: #155724;
            }
            
            .status-text {
              font-size: 20rpx;
            }
          }
        }
        
        .item-content {
          padding-right: 60rpx;
          
          .content-row {
            display: flex;
            justify-content: space-between;
            padding: 8rpx 0;
            border-bottom: 1rpx solid #f0f0f0;
            
            &:last-child {
              border-bottom: none;
            }
            
            .row-label {
              font-size: 26rpx;
              color: #666;
              min-width: 140rpx;
            }
            
            .row-value {
              font-size: 26rpx;
              color: #333;
              flex: 1;
              text-align: right;
            }
          }
        }
        
        .item-action {
          position: absolute;
          right: 24rpx;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    
    .pagination-section {
      padding: 30rpx 0;
      border-top: 1rpx solid #f0f0f0;
      
      .pagination-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20rpx;
        
        .pagination-btn {
          padding: 12rpx 24rpx;
          background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
          color: #fff;
          border: none;
          border-radius: 8rpx;
          font-size: 24rpx;
          font-weight: bold;
          
          &:disabled {
            background: #ccc;
          }
        }
        
        .page-info {
          font-size: 26rpx;
          color: #666;
        }
      }
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
